<template>
   <div class="home-header">
       <div class="loaction">
           {{this.computedCity}}<i class="iconfont iconxiajiantou"></i>
       </div>
       <router-link :to="{path:'/search'}" tag="div" class="search">
           <i class="iconfont iconmagnifier"></i>
           请输入商家名、品类或者商圈...
       </router-link>
       <!-- tag属性作用是将router-link渲染解析成div标签，避免因为元素改动带来的布局问题 -->
       <router-link :to="{path:'/mine'}" tag="div" class="person">
           <i class="iconfont iconicon-test"></i>
       </router-link>
   </div>
</template>
   
<script>
   export default {
       props: {
           city:String
       },
       data () {
           return {
               /* city:'西安' */
           }
       },
       computed: {
           computedCity(){
               return '^'+this.city+'^'
           }
       }
   }
</script>
   
<style scoped lang="less">
    // 1、引入外部less文件
    @import '~@/assets/styles/base.less';
    .home-header{
        width: 100%;
        height: 1.3467rem;
        background: @primaryThemeColor;
        display: flex;//给父级元素添加弹性盒模型属性
        align-items: center;//交叉轴方向对齐方式：居中center
        .loaction{
            width: 2rem;
            height: 1.346667rem;
            text-align: center;
            line-height: 1.346667rem;
            font-size: .373333rem;
            i{
                font-size: .666667rem;
                vertical-align:middle;
            }
        }
        .search{
            height: .853333rem;
            flex: 1;/**等比例放大，将剩余空间进行占用 */
            background: rgba(255,255,255,.9);
            border-radius: .24rem;
            color: #999999;
            font-size: .346667rem;
            line-height: .853333rem;
            text-indent: 1em;
            i{
                font-size: .533333rem;
                vertical-align:middle;
                margin-right: .333333rem;
            }
        }
        .person{
            width: 1.306667rem;
            height: 1.346667rem;
            line-height: 1.346667rem;
            text-align: center;
            i{
                font-size: .64rem;
                vertical-align:middle;
            }
        }
    }
</style>